<template>
  <div>
    <!-- 点击添加按钮，弹框 -->
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 表格 -->
    <list-vue @willUpdate="willUpdate" :arr="arr" @init="getlist"></list-vue>

    <!-- 分页 -->

    <el-pagination
    @current-change="changePage" 
    background 
    layout="prev, pager, next" 
    :total="total"
    :page-size='size'
    ></el-pagination>
    <!-- 弹框 -->
    <form-vue :info="info" :arr="arr" @init="getlist" ref="form"></form-vue>
  </div>
</template>
<script>
import listVue from "./components/list.vue";
import formVue from "./components/form.vue";
import { mapGetters, mapActions } from "vuex";
import { requserlist,requsercount } from "../../http/api";
import { toggle } from "../../mixins";

export default {
  components: {
    listVue,
    formVue
  },
  props: [],
  mixins: [toggle],

  data() {
    return {
      
      arr: [],
      total:0,
      page:1,
      size:2,//一页的数量
    };
  },
  computed: {
    ...mapGetters({})
  },
  mounted() {
    this.getlist();
  },
  methods: {
    ...mapActions({}),
    requserList(){
        requserlist({
        //第一页的十条记录
        page: this.page,
        size: this.size
      }).then(res => {
        if (res.data.code == 200) {

          this.arr = res.data.list ? res.data.list : [];

          //如果当前页不是第一页，并且取到0条数据，那么应该请求上一页，如果当前是第一页，则不用请求，
          if(this.page!=1 && arr.length==0){
              this.page--;
              this.requserList();
              return;
          }
          this.arr=arr;
        }
      });
    },
  

    //请求列表
    getlist() {
      this.requserList()

      //请求总数
      requsercount().then(res=>{
          if(res.data.code===200){
              
              this.total=res.data.list[0].total;
          }
      })
    },
    changePage(e){
        this.page=e;
        this.requserList()

      }
  }
};
</script>
<style scoped lang='less'>
@import "../../less/index.less";
</style>